import {resolve} from 'path'
import {ConfigEnv, loadEnv, UserConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
// 按需加载自定义组件 - unplugin-vue-components
import Components from 'unplugin-vue-components/vite'
// 自动导入 - npm i -D unplugin-auto-import
// @ts-ignore
import AutoImport from 'unplugin-auto-import/vite'
// 组件加载器
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import { splitVendorChunkPlugin } from 'vite'



// 参考：https://cn.vitejs.dev/config/
// export default defineConfig({
export default ({mode}: ConfigEnv): UserConfig => {
    // 获取 .env 环境配置文件
    const env = loadEnv(mode, process.cwd());

    return {
        base: './',
        resolve: {
            // 配置别名
            alias: {
                '@': resolve(__dirname, './src'),
                'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
            }
        },
        plugins: [
            vue(),
            createSvgIconsPlugin({
                iconDirs: [resolve(__dirname, 'src/icons/svg')],
                symbolId: 'icon-[dir]-[name]'
            }),
            splitVendorChunkPlugin(),
            // 按需引入
            Components({
                dts: true,
                dirs: ['src/components'], // 按需加载的文件夹
                resolvers: [
                    ElementPlusResolver(),  // ElementPlus按需加载
                ]
            }),
            // 自动导入
            AutoImport({
                resolvers: [ElementPlusResolver()],
            })
        ],
        // server: {
        // 	host: '0.0.0.0',
        // 	port: 9529, // 端口号
        // 	open: false // 是否自动打开浏览器
        // }
        // 本地反向代理解决浏览器跨域限制
        server: {
            host: 'localhost',
            port: Number(env.VITE_APP_PORT),
            open: true, // 运行自动打开浏览器
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    target: 'http://localhost:9500',
                    changeOrigin: true,
                    // 路径重写
                    rewrite: path =>
                        path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '/')
                }
            }
        },
        // 构建配置
        build: {
            // 混淆器，terser构建后文件体积更小: npm i terser --legacy-peer-deps
            minify: 'terser',
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true,
                },
            },
            // 包体积
            chunkSizeWarningLimit: 1000,
            // 打包配置
            rollupOptions: {
                output:{
                    // 解决 500k 限制
                    manualChunks(id) {
                        // 分割资源
                        if (id.includes('node_modules')) {
                            const arr = id.toString().split('node_modules/')[1].split('/')
                            switch(arr[0]) {
                                case '@vue':
                                case 'axios':
                                case 'element-plus':
                                case 'lodash-es':
                                // case 'highlight.js':
                                    return '_' + arr[0]
                                default :
                                    // console.log(id + '====' + arr[0])
                                    return '_vendor'
                            }
                        }
                        // return '_index'
                        // console.log(id)
                    },
                    // 文件分割目录
                    chunkFileNames: 'js/[name]-[hash].js',
                    entryFileNames: 'js/[name]-[hash].js',
                    assetFileNames: '[ext]/[name]-[hash].[ext]',
                }
            }
        }
    }
}
